<template>
  <div class="view_page userList">
    <el-card class="box-card">
      <!--卡片头部-->
      <div slot="header" class="clearfix">
        <!--左侧-->
        <div class="left">
          <div class="menu-title">
            MapModelData（倾斜摄影模型配置数据）
          </div>
        </div>
        <!--右侧-->
        <div class="right">
          <el-button type="primary" size="small" @click="navtoAdd('add')">新增</el-button>
        </div>
      </div>
      <!-- 卡片内容 -->
      <div>
        <!--筛选-->
        <div class="query-operate">
          <el-form class="demo-form-inline indoor-scene-buzhou-list-form" :inline="true" :model="TESTFROMDATA"
                   @submit.native.prevent>
            <!--            <el-form-item label="模型" label-width="120px" style="margin-top: 5px; margin-bottom: 5px;">
                          <el-select v-model="TESTFROMDATA.cur_model_id" @change="changeModel()">
                            <el-option label="全部" value="-1"></el-option>
                            <el-option v-for="item in modelList" :key="item.modelId" :label="item.modelName"
                                       :value="item.modelId"></el-option>
                          </el-select>
                        </el-form-item>-->
            <el-form-item label="title" label-width="80px" style="margin-top: 5px; margin-bottom: 5px;">
              <el-input v-model="TESTFROMDATA.title" placeholder="请输入title" clearable @clear="searchList"></el-input>
            </el-form-item>
            <el-form-item style="margin-top: 5px; margin-bottom: 5px;margin-left: 10px;">
              <el-button type="primary" @click="searchList()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-table :data="datalist" style="width: 100%">
          <!--          <el-table-column prop="id" label="序号" align="center" min-width="100">
                      <template slot-scope="scope">
                        <div>
                          {{ (pageNum - 1) * size + (scope.$index + 1) }}
                        </div>
                      </template>
                    </el-table-column>-->
          <el-table-column prop="id" label="id" align="center" min-width="60"></el-table-column>
          <el-table-column prop="title" label="title" align="center" min-width="200">
            <template slot-scope="scope">
              <el-popover width="500" trigger="hover" placement="top">
                <p>{{ scope.row.title }}</p>
                <div slot="reference" class="name-wrapper">
                  <div class="list-name">{{ scope.row.title }}</div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="modelId" label="modelId" align="center" min-width="150"></el-table-column>-->
          <!--          <el-table-column prop="modelName" label="modelName" align="center" min-width="150"></el-table-column>-->
          <el-table-column prop="modelPath" label="modelPath" align="center" min-width="250">
            <template slot-scope="scope">
              <el-popover width="500" trigger="hover" placement="top">
                <p>{{ scope.row.modelPath }}</p>
                <div slot="reference" class="name-wrapper">
                  <div class="list-name">{{ scope.row.modelPath }}</div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
<!--          <el-table-column
            prop="json_pro"
            label="工程"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <el-popover width="" trigger="hover" placement="top"
                          popper-class="u_my_popover">
                <div style="white-space: pre-line;">
                  <span v-for="(it,ii) in scope.row['json_pro']" :key="ii">{{(ii!=0?(', '+(it.pro_name||'')):(it.pro_name||''))}}</span>
                </div>
                <div slot="reference" class="name-wrapper">
                  <div class="text-ellipsis-2" style="white-space: pre-line;">
                    <span v-for="(it,ii) in scope.row['json_pro']" :key="ii">{{(ii!=0?(', '+(it.pro_name||'')):(it.pro_name||''))}}</span>
                  </div>
                </div>
              </el-popover>

            </template>
          </el-table-column>
          <el-table-column
            prop="json_rivers"
            label="地区"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <el-popover width="" trigger="hover" placement="top"
                          popper-class="u_my_popover">
                <div style="white-space: pre-line;">
                  <span v-for="(it,ii) in scope.row['json_rivers']" :key="ii">{{(ii!=0?(', '+(it.river_name||'')):(it.river_name||''))}}</span>
                </div>
                <div slot="reference" class="name-wrapper">
                  <div class="text-ellipsis-2" style="white-space: pre-line;">
                    <span v-for="(it,ii) in scope.row['json_rivers']" :key="ii">{{(ii!=0?(', '+(it.river_name||'')):(it.river_name||''))}}</span>
                  </div>
                </div>
              </el-popover>
            </template>
          </el-table-column>-->
          <!--<el-table-column prop="position" label="position" align="center" min-width="200"></el-table-column>
          <el-table-column prop="rotation" label="rotation" align="center" min-width="150"></el-table-column>
          <el-table-column prop="scale" label="scale" align="center" min-width="200"></el-table-column>
          <el-table-column prop="highlight_name" label="highlight_name" align="center"
                           min-width="150"></el-table-column>
          <el-table-column prop="modelScanningPosition" label="modelScanningPosition" align="center"
                           min-width="250"></el-table-column>
          <el-table-column prop="modelScanningRotation" label="modelScanningRotation" align="center"
                           min-width="150"></el-table-column>
          <el-table-column prop="modelScanningScale" label="modelScanningScale" align="center"
                           min-width="200"></el-table-column>-->
          <el-table-column prop="bubble_pos" label="bubble_pos" align="center" min-width="200"></el-table-column>
          <el-table-column prop="bubble_focusingPos" label="bubble_focusingPos" align="center"
                           min-width="200"></el-table-column>
          <el-table-column prop="bubble_focusing" label="bubble_focusing" align="center"
                           min-width="150"></el-table-column>
          <el-table-column prop="bubble_focusingDistance" label="bubble_focusingDistance" align="center"
                           min-width="150"></el-table-column>
          <el-table-column prop="bubble_thumbnailPath" label="bubble_thumbnailPath" align="center"
                           min-width="250">
            <template slot-scope="scope">
              <el-popover width="500" trigger="hover" placement="top">
                <p>{{ scope.row.bubble_thumbnailPath }}</p>
                <div slot="reference" class="name-wrapper">
                  <div class="list-name">{{ scope.row.bubble_thumbnailPath }}</div>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="bubble_type" label="bubble_type" align="center" min-width="120"></el-table-column>
          <el-table-column prop="centerPos" label="centerPos" align="center" min-width="250"></el-table-column>
          <el-table-column fixed="right" label="操作" min-width="180" align="center">
            <template slot-scope="scope">
              <div style="display: flex;align-items: center;flex-wrap: wrap; ">
                <el-button type="primary" size="small" @click="navtoAdd('update', scope.row)">修改</el-button>
                <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <pagination :total="total" :currentPage="pageNum" :pageSize="size" position="right"
                    @search="searchPagination"></pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import {Message} from "element-ui";
import pagination from "@/components/common/pagination/pagination";
import devConfig from "*/dev.config";

export default {
  components: {
    pagination
  },
  watch: {},
  data() {
    return {
      // 筛选内容
      TESTFROMDATA: {
        title: "",
        cur_model_id: '-1',
      },
      modelList: [
        /*{
          modelId: 1,
          modelName: "模型1",
          modelPath: "MapModel/无盐灌区胜利渠整修及延伸工程/朝阳村水库/",
          position: "584.3458,2,529.014",
          rotation: "0,180,0",
          scale: "0.0145,0.0145,0.0145",
          highlight_name: "cycsk_gaoliang",
          version: '1.2'
        },
        {
          modelId: 2,
          modelName: "模型2",
          modelPath: "MapModel/无盐灌区胜利渠整修及延伸工程/朝阳村水库/",
          position: "584.3458,2,529.014",
          rotation: "0,180,0",
          scale: "0.0145,0.0145,0.0145",
          highlight_name: "cycsk_gaoliang",
          version: '1.2'
        }*/
      ],

      // 列表的数据
      // datalist: [],
      datalist: [
        /*        {
                id: 1,
                title: "朝阳村水库",

                modelId: 1,
                modelPath: "MapModel/无盐灌区胜利渠整修及延伸工程/朝阳村水库/",
                position: "584.3458,2,529.014",
                rotation: "0,180,0",
                scale: "0.0145,0.0145,0.0145",
                highlight_name: "cycsk_gaoliang",

                modelScanningPosition: "-3.127526,57.72813,16.92147",
                modelScanningRotation: "0,9,0",
                modelScanningScale: "36.34483,68.96552,32",
                bubble_pos: "1.355401,54.96951,-25.559",
                bubble_focusingPos: "1.355401,20.48675,-25.559",
                bubble_focusing: "0,30",
                bubble_focusingDistance: "413.7931",
                bubble_thumbnailPath: "",
                bubble_type: "Model",
                centerPos: "-1.354752,117.4443,25.56056",
                json_pro: [
                  {
                    id: 39,
                    pro_type: 10,
                    pro_id: 4,
                    pro_name: "二十里铺引湖干渠整修及延伸工程",
                    has_change: -1
                  }
                ],
                json_rivers: [
                  {
                    id: 160,
                    river_type: 4,
                    river_id: 13,
                    river_name: "二十里铺灌区",
                    has_change: -1
                  }
                ]
              }*/
      ],
      pageNum: 1,
      page: 1,
      size: 10,
      total: 0
    };
  },
  created() {
	this.page = localStorage.getItem("page");
    this.getModelList();
    // this.getListPage();
  },
  mounted() {
  },
  methods: {
    //切换状态
    changeModel() {
      var _this = this;
      _this.page = 1;
      _this.getListPage();
    },
    getModelList() {
      var _this = this;
      var datas = {
        page: _this.page,
        size: 999
      };
      _this.$apis.u_modelList_new(datas).then(res => {
        if (res.result == 0) {
          _this.modelList = [];
          _this.modelList = res.data;
          // for (let i = 0; i < res.data.length; i++) {
          //   _this.modelList.push(res.data[i]);
          // }
          _this.getListPage();
        }
      });
    },
    //查询列表
    getListPage() {
      var _this = this;
      var datas = {
        modelId: _this.TESTFROMDATA.cur_model_id,
        title: _this.TESTFROMDATA.title,
        page: _this.page,
        size: _this.size,
      };
      _this.$apis.u_map_list(datas).then(res => {
        if (res.result == 0) {
          _this.datalist = res.data;
          _this.total = res.rows;
          _this.pageNum = res.page;
        }
      });
    },
    //模糊查询
    searchList() {
      this.page = 1;
      this.datalist = [];
      this.getListPage();
    },
    //分页
    searchPagination(page) {
      this.page = page;
      localStorage.setItem("page", page);
      this.getListPage();
    },
    // 跳转详情
    lookfiles(item) {
      var _this = this;
      var datas = {
        id: item
      };
      _this.$apis.v2_safe_query(datas).then(res => {
        if (res.result == 0) {
          _this.$router.push({
            path: "/admin/monitorsiteManage/monitorsiteDetial",
            query: {
              data: res.data
            }
          });
        }
      });
    },
    //跳转新增
    navtoAdd(type, item) {
      var _this = this;
      if (type == "add") {
        _this.$router.push({
          path: "/admin/modelConfigurationManage/modelConfigurationAdd",
          query: {
            type: type,
            modelList: this.modelList
          }
        });
      } else {
        _this.$router.push({
          path: "/admin/modelConfigurationManage/modelConfigurationAdd",
          query: {
            type: type,
            modelList: this.modelList,
            data: item,
          }
        });
      }
    },
    del(item) {
      var _this = this;
      var datas = {
        id: item.id
      };
      _this
        .$confirm("确定要删除【" + item.id + "】此条数据吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.$apis.u_map_del(datas).then(res => {
            if (res.result == 0) {
              Message.success("删除成功");
              if (_this.page > 1 && _this.datalist.length <= 1) {
                _this.page = _this.page - 1;
              }
              _this.getListPage();
            }
          });
        })
        .catch(() => {
        });
    },
  }
};
</script>

<style>
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal !important;
}
</style>
